<template>
  <div class="blog-list-container">
    <h1>博客列表</h1>
    
    <div class="loading" v-if="loading">
      加载中...
    </div>
    
    <div class="error" v-else-if="error">
      {{ error }}
      <button @click="loadBlogs">重新加载</button>
    </div>
    
    <div v-else>
      <div class="blog-stats" v-if="blogs.length > 0">
        共 {{ blogs.length }} 篇博客
      </div>
      
      <div class="no-blogs" v-else>
        暂无博客文章
      </div>
      
      <div class="blog-list">
        <div 
          class="blog-item" 
          v-for="blog in blogs" 
          :key="blog.id"
          @click="viewBlog(blog.id)"
        >
          <h2 class="blog-title">{{ blog.title }}</h2>
          <div class="blog-meta">
            <span class="author">作者: {{ blog.author }}</span>
            <span class="category">分类: {{ blog.category }}</span>
            <span class="date">发布时间: {{ formatDate(blog.date) }}</span>
          </div>
          <p class="blog-excerpt">{{ blog.content.substring(0, 100) }}{{ blog.content.length > 100 ? '...' : '' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 博客文章接口定义
interface BlogPost {
  id: number
  title: string
  author: string
  content: string
  category: string
  date: string
}

// 响应式数据
const blogs = ref<BlogPost[]>([])
const loading = ref(true)
const error = ref('')
const router = useRouter()

// 格式化日期
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 查看博客详情
const viewBlog = (id: number) => {
  // 跳转到博客详情页
  router.push(`/blog/${id}`)
}

// 加载博客列表
const loadBlogs = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 模拟从API获取数据
    // 实际使用时应该替换为真实的API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟博客数据
    blogs.value = [
      {
        id: 1,
        title: 'Vue 3 入门指南',
        author: '张三',
        content: 'Vue 3 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。',
        category: '技术',
        date: '2023-01-15'
      },
      {
        id: 2,
        title: '我的旅行日记',
        author: '李四',
        content: '今天去了一个美丽的地方，风景如画，让人心旷神怡。这个地方有山有水，空气清新，远离城市的喧嚣，是放松心情的好去处。',
        category: '旅行',
        date: '2023-02-20'
      },
      {
        id: 3,
        title: '健康生活的重要性',
        author: '王五',
        content: '现代人生活节奏快，压力大，很容易忽视身体健康。保持健康的生活方式对于提高生活质量至关重要。我们应该注意合理饮食、规律作息、适量运动。',
        category: '生活',
        date: '2023-03-10'
      }
    ]
  } catch (err) {
    error.value = '加载博客列表失败'
    console.error('加载博客列表时出错:', err)
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadBlogs()
})
</script>

<style scoped>
.blog-list-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.loading, .error, .no-blogs {
  text-align: center;
  padding: 40px 20px;
  font-size: 18px;
}

.error {
  color: #d32f2f;
}

.error button {
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #d32f2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.blog-stats {
  text-align: right;
  margin-bottom: 20px;
  color: #666;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.blog-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.blog-title {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
}

.blog-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.blog-excerpt {
  margin: 0;
  color: #555;
  line-height: 1.6;
}
</style>